// 数据渲染
let apiTypeData = [
  { name: "全部", keyword: "身份证实名", isnew: false },
  { name: "生活服务", keyword: "银行卡", isnew: false },
  { name: "金融科技", keyword: "短信", isnew: false },
  { name: "交通地理", keyword: "天气", isnew: false },
  { name: "充值缴费", keyword: "短信", isnew: false },
  { name: "数据智能", keyword: "手机归属地", isnew: false },
  { name: "企业工商", keyword: "IP", isnew: false },
  { name: "应用开发", keyword: "手机归属地", isnew: false },
  { name: "电子商务", keyword: "IP", isnew: false },
  { name: "吃喝玩乐", keyword: "视频", isnew: false },
  { name: "文娱视频", keyword: "视频", isnew: false },
  { name: "免费接口大全", keyword: "短信", isnew: true },
  { name: "短信", keyword: "身份证实名", isnew: false },
  { name: "汽车", keyword: "银行卡", isnew: false },
  { name: "核验", keyword: "银行卡", isnew: false },
  { name: "最新发布", keyword: "银行卡", isnew: true },
  { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]

// 定义代码片段
let apiCatgrayhtml = "";
// 组装html代码
apiTypeData.forEach(function(v,i){
    apiCatgrayhtml+=`
    <a href="#" class = "active ${v.isnew ?'bold':''}">${v.name}</a>
    `
})
$('.box2').innerHTML = apiCatgrayhtml
// console.log(apiCatgrayhtml);
$('.box2').addEventListener('click',function(e) {
    if (e.target.nodeName === 'A') {
        // console.log(1);
        $('.box3 p').textContent = (e.target.textContent)
    }
})


//API数据渲染
let listDataArr = [
  //第一行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

  //第二行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  //第三行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  //第四行
  { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
let lisearr = '';
listDataArr.forEach(function(v){
    // console.log(v);
    lisearr +=`
    <li class="box8 df" >
                <a href="../apidate/apidate.html">
                <div class="box10 df">
                <img src="../../assets/images/${v.img}" alt="">
                <P>${v.name}</P>
                <p class="${v.price ==='免费'? "green":'red'}">${v.price}</p>
                </div>
                <div class="box11 ${v.isSpecial ?"on":""}">企业专用</div></a>
                <div class="box9" >申请数据</div>
            </li>
    `
})
$('.box4').innerHTML = lisearr
$a('.box9').forEach(function(v){
     v.addEventListener('click',function(){
    // console.log(1); 
    $('.mask').style.display = 'flex'
})
})
$('.pp1').addEventListener('click',function(){
    $('.pp1').style.color = '#00bdff';
    $('.divv2').style.display = "none"
    $('.divv1').style.display = "block"
    $('.pp2').style.color = '';
    $('.nonee3').style.display = "none"
    $('.nonee').style.display = "block"
})
$('.pp2').addEventListener('click',function(){
    $('.pp2').style.color = '#00bdff';
    $('.divv2').style.display = "flex"
    $('.divv1').style.display = "none"
    $('.pp1').style.color = '';
    $('.nonee3').style.display = "flex"
    $('.nonee').style.display = "none"
    $('.clear').style.display = "none"
    $('.clear2').style.display = "none"
})
$('.input1').addEventListener('input',function(){

    if ($('.input1').value.length>0) {
    $('.clear2').style.display = "block"
    }else{
    $('.clear2').style.display = ""
    }
})
$('.input2').addEventListener('input',function(){

    if ($('.input2').value.length>0) {
    $('.clear').style.display = "block"
    }else{
    $('.clear').style.display = ""
    }
})
$('.clear').addEventListener('click',function(){
    $('.input2').value = ''
})
$('.clear2').addEventListener('click',function(){
    $('.input1').value = ''
})